<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>21 PukeGame</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="21 PukeGame.css">
</head>
    <body>
    	<div class="main">
    		<center>
                <div class="one" >
                    <span>Play 1</span><br>
                    <div class="pai" id="play1">

                    </div>
                    <div class="score" id="Play1Score"></div>
                </div>
            </center>

    		<div class="two" >
                <center>
                        <span>Play 2</span><br>
                        <div class="pai" id="play2">

                        </div>
                    <div class="score" id="Play2Score"></div>
                </center>
            </div>

    		<div class="two" >
                <center>
                    <span>Play 3</span>
                        <div class="pai" id="play3">

                        </div>
                 <div class="score" id="Play3Score"></div>
                </center>
            </div>

    		<center>
                <div class="one" id ="mytable">
                    <span>You</span>
                        <div class="pai" id="You">

                        </div>
                    <!--<div class="score">20</div>-->
                </div>
            </center>

            <a href="javascript:void(0);" onclick= "window.location.reload();" ><div class="aButton"><center>Refresh</center></div></a>
    		<a href="javascript:void(0);" onclick= "Change(this);" id="about"><div class="aButton"><center>About</center></div></a>
    		<a href="javascript:void(0);" onclick="User.refuseCard(winer);gavaOver(this); " id ="refuse"><div class="aButton"><center>Refuse</center></div></a>
    		<a href="javascript:void(0);" onclick="User.getCard();gavaOver(this)" id="get"><div class="aButton"><center>Get</center></div></a>
    	</div>
        <div class="about" id="info" >
            +------------------------------------------          <br>
            |     @name:     21PaukGame                          <br>
            |     @author:  &nbsp;流氓兔                         <br>
            |     @reference:海绵宝宝的舅舅                      <br>
            |     @data:     2015-9-23                           <br>
            |     @rule:     玩家尽可能把牌的点数凑够21点 ,      <br>  
            |                但超过21点即输掉游戏，均不够21点时, <br>
            |                接近21点的玩家获胜                  <br>
            |                F5重来                              <br>
            +------------------------------------------          <br>
            <a href="javascript:void(0);" onclick= "Change(this);" id="black"><div class="aButton"><center>Black</center></div></a>
        </div>

        <!--居中的提示牌-->
        <div class="message"><center id="message"></center></div>

    </body>
    <script type="text/javascript">
        /***********函数，对象部分*********/
        function $ (id) 
        {
            /*根据id获取对象,省打字*/
            return document.getElementById(id);
        }

        function Change(obj)
        {
            //根据按钮来弹出和收起
            if(obj.id == "black"){
                $('info').style.display ='none';
            }else if(obj.id == "about"){
                $('info').style.display = 'block'; 
            }else{
                document.write('Error');
            }
        }

        function message(mes)
        {
            //控制提示信息
            $('message').innerHTML = mes;
        }

        var winer;
        var max = 0;
        function showCard(play1,play2,play3)
        {
            //当所有对象实例的flag为false时,开牌计分,并返回假，结束游戏
            //否则返回true,继续游戏
            var Player = new Array(play1,play2,play3);
            for(var i = 0;i < 3; i++){
                if(Player[i].flag == true) return true;
            }

            for (var i = 0; i < Player.length; i++) {
                if (Player[i].score<=21 && Player[i].score > max) 
                    {
                        max = Player[i].score;
                        winer = Player[i];
                    }
            }
            return false;
        }

        var myCard = new Array(13);
        //全局卡牌数组,用于记录以使用掉的牌，如myCard[1]=1，即说明A使用了一张
        //少于4证明该牌可用
        for (var i = myCard.length - 1; i >= 0; i--) {
            myCard[i] = 0;
        };
        function Player(name)
        {
            /*************************************/
            /*       玩家对象                    */
            /*属性:  名字,手牌,标志,牌的数       */
            /*方法： 初始牌,拿牌,不要牌          */
            /*       统计手牌                    */
            /*                                   */
            /*************************************/
            this.name = name;
            this.card = new Array();
            this.flag = true;//这个标志标记玩家是否还拿牌
            this.score = 0;

            this.showP = function()
            {
                //展示界面
                if (this.name != 'You') {
                    for (var i = 0; i < this.card.length; i++) 
                    {
                        var span = document.createElement("span"); 
                        span.innerHTML = '*';//电脑用户显示*
                        span.style.fontSize = "200%";//另*显示大一点
                        var id = this.name;
                        $(id).appendChild(span);
                    }
                }else{
                    for (var i = 0; i < this.card.length; i++) 
                    {
                        var span = document.createElement("span"); 
                        var id = this.name;
                        if(this.card[i] <= 10) span.innerHTML = this.card[i]+"&nbsp;&nbsp;";//玩家显示数值
                        else if(this.card[i] == 11) span.innerHTML = "J&nbsp;&nbsp;";
                        else if(this.card[i] == 12) span.innerHTML = "Q&nbsp;&nbsp;";
                        else if(this.card[i] == 13) span.innerHTML = "K&nbsp;&nbsp;";
                        $(id).appendChild(span);                
                    }
                    var div = document.createElement("div"); 
                    div.style.width = "100%";
                    div.style.height= "20%";
                    div.style.fontSize = "200%";
                    div.id = 'myScore';//给一个id它让拿牌时修改方便
                    div.innerHTML = this.score;
                    $('mytable').appendChild(div);
                }
            }

            this.initCard = function()
            {
                //初始牌,随机两张
                for (var i = 0; i < 2; i++) {
                    //var now=new Date();
                    // var cardNum = (now.getSeconds()+6)%13+1; //这将产生一个基于目前时间的1到13的整数。
                    var cardNum = Math.ceil(Math.random()*(13-1)+1);
                    this.card.push(cardNum);
                    myCard[cardNum]++;
                }

                for (var i = 0; i < this.card.length; i++) {
                    if(this.card[i] > 10)//jkq,记10分
                        this.score = this.score + 10;
                    else
                        this.score = this.score + this.card[i];
                }   
            }


            this.getCard = function()
            {
                //玩家拿牌
                if ((this.card.length <= 44) && this.flag) {
                    //52-8=44,在初始牌后，单个玩家只能获得44张牌
                   var cardNum = Math.ceil(Math.random()*(13-1)+1);
                   while(myCard[cardNum] >= 4){
                        //牌库没牌则重新抽取
                        cardNum = Math.ceil(Math.random()*(13-1)+1);
                    }
                    this.card.push(cardNum);
                    myCard[cardNum]++; 

                    //拿牌后计分
                    if(this.card[this.card.length-1] > 10)//J、Q、K,记10分
                        this.score = this.score + 10;
                    else
                        this.score = this.score + this.card[this.card.length-1];
                
                    //界面显示    
                    //window.alert(User.card+"  点数："+this.score);
                    //显示牌
                    var span = document.createElement('span');
                    span.innerHTML = cardNum;
                    if(cardNum <= 10) span.innerHTML = cardNum+"&nbsp;&nbsp;";//玩家显示数值
                    else if(cardNum == 11) span.innerHTML = "J&nbsp;&nbsp;";
                    else if(cardNum == 12) span.innerHTML = "Q&nbsp;&nbsp;";
                    else if(cardNum == 13) span.innerHTML = "K&nbsp;&nbsp;";
                    $(this.name).appendChild(span); 
                    
                    //改分数
                    $('myScore').innerHTML = this.score;
                    message("你的牌更新了,请再做选择…");
                    //
                    //爆了自动拒绝要牌后结束
                    if(this.score > 21) this.refuseCard(winer);
                }else{
                    message("不能要牌了")
                };
            }

            this.refuseCard = function(thewiner)
            {
                //拒绝拿牌
                this.flag = false;
                if(max == 0 ){
                    //电脑玩家全爆了
                    if (this.score > 21) message("平局");//自己也爆了
                    else message("你赢了");
                }else{
                    if (this.score > 21 || this.score < thewiner.score) 
                        message(thewiner.name+'&nbsp;&nbsp;&nbsp;win&nbsp;&nbsp;&nbsp;点数:'+thewiner.score);
                    else
                        message("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你赢了"); 
                }
            }

            this.autoGet = function()
            {
                //电脑玩家自动判断拿不拿牌
                
                if(this.score <= 15) 
                {   
                    if ((this.card.length <= 44) && this.flag) {
                    //52-8=44,在初始牌后，单个玩家只能获得44张牌
                        var cardNum = Math.ceil(Math.random()*(13-1)+1);
                        while(myCard[cardNum] >= 4){
                        //牌库没牌则重新抽取
                            cardNum = Math.ceil(Math.random()*(13-1)+1);
                        }
                        this.card.push(cardNum);
                        myCard[cardNum]++; 


                        if(this.card[this.card.length-1] > 10)//jkq,记10fen
                            this.score = this.score + 10;
                        else
                            this.score = this.score + this.card[this.card.length-1];
                    }
                }else this.flag = false;
            }
        }

        function gavaOver(obj){
            /*结束游戏时开牌*/
            if(obj.id == 'refuse' || User.score > 21 ){
                $('Play1Score').innerHTML = play1.score;
                $('Play2Score').innerHTML = play2.score;
                $('Play3Score').innerHTML = play3.score;
            }    
        }
        /************************************/
        message('游戏已经开始,<br>其他玩家已经做好选择,<br>请在右下方选择……');
        play1 = new Player('play1');
        play2 = new Player('play2');
        play3 = new Player('play3');
        User = new Player('You');
        play1.initCard();
        play2.initCard();
        play3.initCard();
        User.initCard();
        //初始化
        while(showCard(play1,play2,play3))
        {
            play1.autoGet();
            play2.autoGet();
            play3.autoGet();              
        }
        play1.showP();
        play2.showP();
        play3.showP();
        User.showP();
    </script>
</html>